<!--模板-->
<template>
	<view class="">
		<sundehengCustom :bgColor="backgroundColor" :isBack="true" @onRightcli='clickAdd' @onLeftcli='clickAdd'>

			<!-- #ifdef MP-WEIXIN -->
			<block slot="backText">
				<view class="menus-item__right flex-box dis-flex flex-x-end flex-y-center">
					<text class="sundehengCustom-icon menus-item__right_icon iconfont icon-edit f-26 col-7"></text>
				</view>
			</block>
			<!-- #endif -->

			<block slot="content">
				<text class="sundehengCustom-title">发 现</text>
			</block>

			<!-- #ifdef APP-PLUS -->
			<block slot="right">
				<view class="menus-item__right flex-box dis-flex flex-x-end flex-y-center">
					<text class="sundehengCustom-icon menus-item__right_icon iconfont icon-edit f-26 col-7"></text>
				</view>
			</block>
			<!-- #endif -->
		</sundehengCustom>
		<view class="bbb">
			<div id="vm" class="pubu" v-cloak>
				<ul id="show" class="yg yg_l">
					<li v-for="(item,index) in ListData" :key="index" v-if="index%2==0" :id="[item.id]" @tap="choose">
						<div style="position: relative;">
							<image class="cover" mode='widthFix' :src="item.img[0].image" alt=""></image>
							<div class="u_xinx">
								<img :src="item.avatarUrl" alt="">
								<span>{{item.nickName}}</span>
								<!-- <image src="/static/img/circle/circle_no.png" style="width: 40upx; height: 40upx;" @tap.stop="clickpraise" :id="[item.id]"></image>
								<span>{{item.dianzhan}}</span> -->
							</div>
						</div>
						<p>{{item.title}}</p>
					</li>
				</ul>
				<ul class="yg yg_r">
					<li v-for="(item,index) in ListData" :key="index" v-if="index%2==1" :id="[item.id]" @tap="choose">
						<div style="position: relative;">
							<image class="cover" mode='widthFix' :src="item.img[0].image" alt=""></image>
							<div class="u_xinx">
								<img :src="item.avatarUrl" alt="">
								<span>{{item.nickName}}</span>
								<!-- <image src="/static/img/circle/circle_no.png" style="width: 40upx; height: 40upx;" @tap.stop="clickpraise" :id="[item.id]"></image>
								<span>{{item.dianzhan}}</span> -->
							</div>
						</div>
						<p>{{item.title}}</p>
					</li>
				</ul>
				<div style="clear: both;"></div>
			</div>
			<!-- <view class="add">
				<image src="/static/img/circle/add.png" @tap.stop="clickAdd"></image>
			</view> -->
		</view>

	</view>
</template>


<!--JS-->
<script>
	import sundehengCustom from '@/components/sundeheng-custom/sundeheng-custom.vue';

	export default {
		components: {
			// （组件命名）
			sundehengCustom
		},
		data() {
			return {
				isLogin: false,
				limit: 20,
				page_id: 1,
				ListData: [],
				backgroundColor: "",
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar
			};
		},
		methods: {
			onRightcli() {},
			onLeftcli() {},
			/**
			 * 加载页面数据
			 */
			getPageData: function(callback) {
				let _this = this;
				this._get('page/index', {
					page_id: uni.getStorageSync('page_id')
				}, function(result) {
					// 设置顶部导航栏栏
					_this.setPageBar(result.data.page);
					// 回调函数
					typeof callback === 'function' && callback();
				});
			},

			/**
			 * 设置顶部导航栏
			 */
			setPageBar: function(page) {
				// 设置页面标题
				uni.setNavigationBarTitle({
					title: page.params.title
				});

				this.backgroundColor = page.style.titleBackgroundColor
				// 设置navbar标题、颜色
				uni.setNavigationBarColor({
					frontColor: page.style.titleTextColor === 'white' ? '#ffffff' : '#000000',
					backgroundColor: page.style.titleBackgroundColor
				})
			},
			getList: function() {
				let _this = this;

				_this._post_form('social.social/lists', {
					limit: this.limit,
				}, (result) => {
					if (result.code === 1) {
						this.ListData = result.data
						console.log(result)

					} else {
						_this.showError('网络错误！');
					}
				});
			},
			getImageInfo(path, i) {
				let _this = this;
				return uni.getImageInfo({
					src: path,
					success: function(image) {
						if (image.height == 250) { //横的
							_this.ListData[i].lendType = 0
						} else {
							_this.ListData[i].lendType = 1
						}
					}
				});
			},
			// 选中
			choose(e) {
				let _this = this;
				let id = e.currentTarget.id;
				for (let i = 0; i < this.ListData.length; i++) {
					if (this.ListData[i].id == id) {
						// uni.showNavigationBarLoading()
						uni.getImageInfo({
							src: _this.ListData[i].img[0].image,
							success: function(image) {
								var lendType = 0;
								var _url = "";

								if (image.height == 250) { //横的
									_url = "../addeditinfo/circledetails?id=" + id + "&avatarUrl=" + _this.ListData[i].avatarUrl + "&nickName=" +
										_this.ListData[i].nickName + "&isdelete=" + 0 + "&lendType=0"
								} else {
									_url = "../addeditinfo/circledetails?id=" + id + "&avatarUrl=" + _this.ListData[i].avatarUrl + "&nickName=" +
										_this.ListData[i].nickName + "&isdelete=" + 0 + "&lendType=1"
								}
								uni.navigateTo({
									url: _url
								});
							}
						});
					}
				}
			},
			//点赞
			//url:'../../pages/addeditinfo/addeditinfo'
			// url:'../../pages/addeditinfo/editorinfo'
			clickAdd() {
				if (!this.isLogin){
					this.showError('很抱歉，您还没有登录');
					return;
				}
				uni.navigateTo({
					url: '../../pages/addeditinfo/editorinfo'
				});
			},
			clickpraise(e) {
				
				let _id = e.currentTarget.id;
				let _this = this;

				_this._post_form('social.social/like', {
					s_id: _id,
				}, (result) => {
					if (result.code == 1) {
						for (let i = 0; i < _this.ListData.length; i++) {
							if (_this.ListData[i].id == _id) {

								_this.ListData[i].dianzhan++
							}
						}
					} else {
						_this.showError('网络错误！');
					}
				});

			}
		},
		//下拉刷新
		onPullDownRefresh() {
			let _this = this;
			setTimeout(function() {
				_this.setData({
					limit: 20,
					ListData: []
				});
				_this.getList();
				uni.stopPullDownRefresh();
			}, 1000);
		},
		// 触底加载更多
		onReachBottom() {
			this.setData({
				limit: this.limit + 10,
			});
			this.getList();
		},
		onLoad() {
			// this.getList();
			// _this.page_id = options.page_id;
			this.getPageData();
		},
		onShow() {
			let _this = this;
			_this.getList();
			_this.setData({
				isLogin: _this.checkIsLogin()
			});
		}
	};
</script>


<!--css样式-->
<style lang="scss" scoped>
	[v-cloak] {
		display: none !important;
	}

	* {
		padding: 0;
		margin: 0;
		list-style-type: none;
	}



	body {
		width: 95%;
		margin: 10px auto;
	}

	.bbb {
		position: relative;
		margin-top:16upx;
	}

	.pubu {
		width: calc(100% - 16px);
		margin-left: 8px;
		position: absolute;
		margin-bottom: 150rpx;
	}

	.yg img {
		width: 100%;
		// height:230upx;
		border-radius: 8px 8px 0 0;
	}

	.yg p {
		width: 100%;
		font-size: 0.75rem;
		padding: 3px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		color: #999;
	}

	.yg_l,
	.yg_r {
		width: calc(50% - 5px);
	}

	.yg li {
		background: #fff;
		border-radius: 3px;
		margin-bottom: 10px;
		box-shadow: 0 0 1px #999;
		padding:2px;
		
	}

	.yg_l {
		float: left;
	}

	.yg_r {
		float: right;
	}

	.u_xinx {
		// position: absolute;
		bottom: 0px;
		margin-top: 6px;
		
	}

	.u_xinx img {
		margin-left: 5px;
		background: rgba(0, 0, 0, .2);
		box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
		width: 26px;
		height: 26px;
		border-radius: 50%;
		display: inline-block;
	}

	.u_xinx span {
		position: relative;
		// text-shadow: 0 1px 1px #333;
		top: -8px;
		color: #7a868d;
		font-size: 0.6rem;
		padding-left: 5upx;
	}

	.cover {
		width: 100%;
		vertical-align: top;
		border-radius: 8upx;
	}

	.add {
		position: fixed;
		z-index: 999;
		margin-top: 105%;
		right: 8rpx;
		border-radius: 10px;
		background-color: #d0d5d1;
	}

	.add image {
		width: 70rpx;
		height: 61rpx;
		margin-top: 5rpx;

	}

	.sundehengCustom-icon {
		color: #e2e2e2;
		font-size: 40upx;
	}
	
	.sundehengCustom-title {
		color: #e2e2e2;
	}
</style>
